<template>
	<view>
		<view :style="{ height: `${ statusbarHeight }px`}" class="cal"></view>
		<search-box />
		<view class="cal" ></view>
		<view style="height: 20rpx" class="cal"></view>
		
		<view class="flex" style="background-color: #f0f3f8;">
			<!-- 左侧 -->
			<scroll-view 
			scroll-y 
			:style="{ height: `${calHeight}rpx`}" 
			class="font text-light-black"
			style="width: 180rpx;padding: 0 20rpx;"
			>
				<block v-for="(item, index) in leftListRes" :key="index">
					<view 
					style="height: 150rpx; line-height: 150rpx;"
					@click="lefToright(index)"
					class="animated"
					:class="leftIndex === index ? 'selected pulse font-weight-bold' : ''"
					>{{item}}</view>
				</block>
			</scroll-view>
			
			<!-- 右侧 -->
			<scroll-view
			scroll-y 
			:style="{ height: `${calHeight}rpx`}" 
			:scroll-into-view="rightIndex"
			scroll-with-animation
			@scroll="rightToLeft"
			>
				<block v-for="(item, index) in rightListRes" :key="index">
					<view style="height: 250rpx;margin-bottom: 70rpx;" :id="`right${index}`">
						<!-- 标题 -->
						<view class="text-center" style="height: 80rpx; line-height: 80rpx;">
							<text class="mr-1">{{item.text}}</text>
							<my-icon 
							iconId="icon-youjiantou" 
							iconSize="40" 
							style="display: inline">
							</my-icon>
						</view>
						<!-- 内容 -->
						<view class="bg-white font flex flex-wrap rounded" style="height: 170rpx;">
							<block v-for="(mitem, mindex) in item.content" :key="mindex">
								<view 
								class="flex align-center justify-center" 
								style="width: calc(100% /3);"
								>{{mitem}}</view>
							</block>
						</view>
					</view>
				</block>
				
				<!-- 占位 -->
				<!-- 让戏曲也到达最顶端 -->
				<view :style="{height:`${calHeight - 320}rpx`}"></view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import { sortResources as resources } from './sortResources.js';
	import $U from '@/common/unit.js';
	import SearchBox from '@/components/searchBox.vue';
	export default {
		data() {
			return {
				statusbarHeight: this.$statusbarHeight,
				calHeight: 0,
				rightIndex: 'right0',
				leftIndex: 0,
			}
		},
		components:{
			SearchBox
		},
		computed:{
			// 左侧数据
			leftListRes(){
				return resources.map(v => v.text);
			},
			// 右侧数据
			rightListRes(){
				return resources;
			}
		},
		mounted(){
			// 动态获取高度
			$U.calSurplusHeight({
				pageID: this,
				pos: 'cal',
				isTabBarPage: true,
				success: val => this.calHeight = val
			});
		},
		methods: {
			// 左侧联动右侧跳转对应位置
			lefToright(index){
				this.rightIndex = `right${index}`;
			},
			// 右侧联动左侧跳转对应位置
			rightToLeft(e){
				// console.log(e);
				let curScrollTop = e.detail.scrollTop,
				standardVal = $U.Topx(320),
				curIndex = Math.round(curScrollTop / standardVal);
				this.leftIndex = curIndex;
			}
		}
	}
</script>

<style>
  .selected{
	  color: #f7646d;
  }
</style>
